<template>
	<view class="content">
		<u-swiper height="300" :autoplay="false" :list="swiper_list" mode="rect" indicator-pos="bottomCenter" :border-radius="0" @click="clickSwiper"></u-swiper>
		<view class="user_info">
			<image class="user_img" :src="info.outimg" @click="$to('/pages/detailed/detailed?id=' + info.u_id)"></image>
			<view class="info">
				<view class="name">{{ info.name }}</view>
				<view class="date">{{ info.create_time }}</view>
			</view>
		</view>
		<view class="map_info">
			<view class="name">地址：{{ info.address }}</view>
			<map class="map" v-if="!!info.longitude && !!info.latitude" scale="15" :longitude="info.longitude" :latitude="info.latitude" :markers="markers"></map>
		</view>
		<view class="title">{{ info.title }}</view>
		<view class="cont">{{ info.content }}</view>
	</view>
</template>

<script>
import { shoot_map_find } from '@/api/index.js';
export default {
	data() {
		return {
			isNoMixin: true,
			id: '',
			info: {
				longitude:'',
				latitude:'',
				outimg:'',
				name:'',
				title:'',
				content:'',
				create_time:'',
				address:'',
			},
			swiper_list: [],
			markers: []
		};
	},
	onLoad(data) {
		this.id = data.id;
		this.getList();
	},
	methods: {
		clickSwiper(index){
			//点击图片放大
			this.$viewImg(this.swiper_list,index)
		},
		getList() {
			//根据ID获取详情
			shoot_map_find(this.id).then(res => {
				console.log(res);
				var data = res.data;
				this.swiper_list = data.imgs.split(',');
				this.markers[0] = {
					width: 20,
					height: 20,
					id: res.data.id,
					longitude: res.data.longitude,
					latitude: res.data.latitude,
					iconPath: '../../static/img/map/bind.png',
					callout: {
						content: '标记的位置',
						color: '#fff',
						bgColor: '#4CD964',
						padding: '5',
						borderRadius: '20',
						display: 'BYCLICK'
					}
				};
				this.info = data;
				this.$set_title(data.title);
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.content {
	.title {
		padding: 20rpx 25rpx;
		font-size: 30rpx;
	}
	.cont {
		padding: 10rpx 25rpx;
	}
	.user_info {
		display: flex;
		padding: 20rpx;
		border-bottom: 1rpx solid #eee;
		.user_img {
			width: 80rpx;
			height: 80rpx;
			border-radius: 4rpx;
		}
		.info {
			flex: 1;
			padding-left: 20rpx;
			.name {
			}
			.date {
				text-align: right;
			}
		}
	}
	.map_info {
		border-bottom: 1rpx solid #eee;
		.name{
			padding: 20rpx;
		}
		.map {
			width: 100%;
			height: 300rpx;
		}
	}
}
</style>
